<template>
	<view class="container">
		<view class="top-nav">
			<!-- <view class="tab-item" :class="{on: navId == 0}" @click="typeclick" data-type='0'>
				专业认证
			</view>
			<view class="tab-item" :class="{on: navId == 1}" @click="typeclick" data-type='1'>
				测量尺寸
			</view> -->
			<view class="tab-item" :class="{on: navId === item.id}" @click="typeclick1(item.id)" v-for="item,index in topNav" :key="index"><text>{{item.name}}</text></view>
		</view>
		<view class="content">
			<rich-text :nodes="article" class="rule attestation"></rich-text>
		</view>
	</view>
</template>

<script>
	import {
		getArticleCategoryList
	} from '@/api/getarticlecategorylist.js'
	import {
		getArticleList
	} from '@/api/getArticleList.js'
	export default {
		data() {
			return {
				navId: 0,
				majorArt: '',
				sizeArt: '',
				article: '',
				topNav: [
					{
						id: 0,
						name: '专业认证'
					},
					{
						id: 1,
						name: '测量尺寸'
					}
				]
			};
		},
		onLoad(potion) {
			this.init();
		},
		onShow() {

		},
		methods: {
			init() {
				getArticleCategoryList({
					webClient: 'app'
				}).then(res => {
					console.log(res)
					this.majorId = res.data.categoryList[1].articles[1].id
					this.sizeId = res.data.categoryList[1].articles[0].id

					getArticleList({
						articleId: this.majorId
					}).then(deta => {
						this.article = deta.data.articleList[0].content
						this.article = this.myReplace(this.article, '<div class="', '<div class="normal ')
						console.log(this.article)
					})

				})
			},
			myReplace (sInput, sChar, sReplaceChar) {
			    if(sInput == '' || sInput == undefined) {
			        return ''
			    }
			    var oReg = new RegExp(sChar,'g')
			    return sInput.replace(oReg, sReplaceChar)
			},
			typeclick1(id) {
				this.navId = id
				if (id == 0) {
					getArticleList({
						articleId: this.majorId
					}).then(deta => {
						this.article = deta.data.articleList[0].content;
						this.article = this.myReplace(this.article, '<div class="', '<div class="normal ')
						console.log(this.article)
					})
				}
				if (id == 1) {
					getArticleList({
						articleId: this.sizeId
					}).then(deta => {
						this.article = deta.data.articleList[0].content
					})
				}
			
			},
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 60rpx 50rpx;
		
	}
	.image{
		width: 100%;
	}
	.top-nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #f5f5f5;

		.tab-item {
			position: relative;
			font-size: 24rpx;
			width: 50%;
			line-height: 90rpx;
			text-align: center;
		}
		
		.tab-item text {
			width: 40%;
			display: inline-block;
			line-height: 90rpx;
			border-bottom: 5rpx solid rgba(0, 0, 0, 0);
		}
		
		.tab-item.on text {
			border-bottom: 5rpx solid #b81c22;
		}

		// .tab-item.on::before {
		// 	position: absolute;
		// 	content: '';
		// 	width: 20%;
		// 	height: 5rpx;
		// 	bottom: 0;
		// 	left: 50%;
		// 	transform: translateX(-50%);
		// 	background-color: #b81c22;

		// }
	}

	.attestation .title {
		padding-bottom: .30rem;
		font-size: .32rem;
		display: none;
	}
	.attestation .intro {
		line-height: 1.5;
		font-weight: 200;
		padding-bottom: 60rpx;
		color: #595757;
	}

	// .attestation .columns {
	// 	display: flex;
	// 	align-items: center;
	// 	flex-wrap: wrap;
	// }

	.attestation .columns .image{
		min-width: 100%;
		width: 100% !important;
		margin-bottom: 60rpx;
	}

	.attestation .columns .dl .dd {
		// background: url('~@/static/images/47.png') no-repeat left / 00.04rem;
		font-weight: 200;
		line-height: 1.5;
	}

	.attestation .columns .dl .dt {
		// padding-left: 20rpx;
		line-height: 1.5;
		font-weight: 200;
		color: #666666;
	}
	
	rich-text {
		line-height: 2;
	}
	
	.normal {
		font-weight: normal!important;
		color: #000!important;
	}
</style>
